<template>
	<view class="root" v-if="agreements.length">
		<template v-if="needAgreements">
			<checkbox-group @change="modelValue=!modelValue">
				<label class="checkbox-box">
					<!-- modelValue{{modelValue}} -->
					<checkbox :checked="modelValue" style="transform: scale(0.5);margin-right: -6px;" />
					<text class="text">同意</text>
				</label>
			</checkbox-group>
			<view class="content">
				<view class="item" v-for="(agreement,index) in agreements" :key="index">
					<text class="agreement text" @click="navigateTo(agreement)">{{agreement.title}}</text>
					<text class="text and" v-if="hasAnd(agreements,index)" space="nbsp"> 和 </text>
				</view>
			</view>
		</template>
		<!-- 弹出式 -->
		<uni-popup v-if="needAgreements||needPopupAgreements" ref="popupAgreementRef" type="center">
			<uni-popup-dialog confirmText="同意" @confirm="popupConfirm">
				<view class="content">
					<text class="text">请先阅读并同意</text>
					<view class="item" v-for="(agreement,index) in agreements" :key="index">
						<text class="agreement text" @click="navigateTo(agreement)">{{agreement.title}}</text>
						<text class="text and" v-if="hasAnd(agreements,index)" space="nbsp"> 和 </text>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted, watch } from 'vue';
	import config from '@/uni_modules/uni-id-pages/config.js';

	// 定义 props
	const props = defineProps({
		scope: {
			type: String,
			default: 'register'
		}
	});

	const modelValue = defineModel();
	watch(modelValue, (newValue) => {
		// console.log('同意modelValue 变化了 newValue: ', newValue);
		// if (newValue) {
		// 	确认后执行()
		// }
	});
	const popupAgreementRef = ref();
	const needAgreements = ref(false);
	const needPopupAgreements = ref(false);

	let 确认后执行 = () => console.log('未定义');

	const agreements = computed(() => {
		if (!config.agreements) {
			return [];
		}
		const { serviceUrl, privacyUrl } = config.agreements;
		return [{
				url: serviceUrl,
				title: "用户服务协议"
			},
			{
				url: privacyUrl,
				title: "隐私政策条款"
			}
		];
	});

	onMounted(() => {
		needAgreements.value = (config?.agreements?.scope || []).includes(props.scope);
	});

	const popupConfirm = () => {
		modelValue.value = true;
		确认后执行()
	};

	const popup = (Fun) => {
		// console.log('Fun: ', Fun);
		needPopupAgreements.value = true;
		// this.needAgreements = true
		if (Fun) {
			确认后执行 = Fun;
		}
		if (popupAgreementRef) {
			popupAgreementRef.value.open();
		}
	};

	const navigateTo = ({ url, title }) => {
		uni.navigateTo({
			url: '/uni_modules/uni-id-pages/pages/common/webview/webview?url=' + url + '&title=' + title,
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	};

	const hasAnd = (agreementsList, index) => {
		return agreementsList.length - 1 > index;
	};


	// 暴露方法和数据供模板使用
	defineExpose({
		popupConfirm,
		popup,
		navigateTo,
		hasAnd,
		agreements,
		needAgreements,
		needPopupAgreements
	});
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	/* #endif */
	.root {
		flex-direction: row;
		align-items: center;
		font-size: 12px;
		color: #8a8f8b;
	}

	.checkbox-box,
	.uni-label-pointer {
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.item {
		flex-direction: row;
	}

	.text {
		line-height: 26px;
	}

	.agreement {
		color: #04498c;
		cursor: pointer;
	}

	.checkbox-box ::v-deep .uni-checkbox-input {
		border-radius: 100%;
	}

	.checkbox-box ::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
		border-color: $uni-color-primary;
		color: #FFFFFF !important;
		background-color: $uni-color-primary;
	}

	.content {
		flex-wrap: wrap;
		flex-direction: row;
	}

	.root ::v-deep .uni-popup__error {
		color: #333333;
	}
</style>